<template>
  <ul id="content">
            <!-- 事项列表没有数据时显示的内容 -->
            <li v-if="!itemexist">
                <span class="zero"></span>
            </li>
            <!-- 循环渲染事项items  渲染某一个事项的条件v-if 必须满足，该事项未被删除：isDel属性不为true且该事项的完成状态done与当前tab栏选择：currentList（0表示显示未完成事项|1表示显示已完成|2表示两者都显示）一致 -->
            <li v-for="item in items"  :key="item.id">
                <!-- 用span模仿checkbox 带有点击事件，实现勾选效果 -->
                <span class="checkbox" @click="$emit(`toggle`,item.id)"><i :class="{select:item.done}"></i></span>
                <!-- 事项显示区域 双击事件：修改事项的内容 -->
                <span class="text" @dblclick="$emit(`settext`,item.id,true)">
                    <!-- 做修改操作的input框 v-if切换到修改状态即modiState匹配了某一个id时，渲染该input-->
                    <input type="text" class="modiInput" v-if="modistate==item.id" v-model="item.content" @blur="setText(item.content)" @keyup.enter="$emit(`settext`,modistate,false)" v-select>
                    <!-- 当modiState不匹配任何id，等于-1时，渲染该区域，直接显示事项的数据 -->
                    <i v-text="item.content" :class="{done:item.done}" v-if="modistate!=item.id"></i>
                    <!-- 删除按钮 -->
                <span class="del" @click="$emit(`remove`,item.id)">x</span></span>
            </li>
        </ul>
</template>

<script>
export default {
    props:["items","modistate","current","itemexist"],
    directives:{
        'select':{
             inserted: function(el) {
                if (el) el.select();
             }
        }
    },
    methods:{
        setText(val){
            if (!val.trim()) this.$layer.msg(`文本不能为空！`);
            else this.$emit(`settext`,this.modistate,false);
        }
    }
}
</script>

<style>

</style>